<template>
  <div class="calendar">
    <div class="warp-title">博客日历</div>
    <a-calendar v-model:value="times" :fullscreen="false" valueFormat="YYYY-MM-DD" @select="onSelect">
      <template #headerRender="{ value, type, onChange, onTypeChange }">
        <div style="padding: 10px">
          <a-row type="flex" justify="space-between">
            <a-col>
              <a-select
                  size="small"
                  :dropdown-match-select-width="false"
                  class="my-year-select"
                  :value="String(value.year())"
                  @change="
                  newYear => {
                    onChange(value.clone().year(newYear));
                  }
                "
              >
                <a-select-option
                    v-for="val in getYears(value)"
                    :key="String(val)"
                    class="year-item"
                >
                  {{ val }}
                </a-select-option>
              </a-select>
            </a-col>
            <a-col>
              <a-select
                  size="small"
                  :dropdown-match-select-width="false"
                  :value="String(value.month())"
                  @change="
                  selectedMonth => {
                    onChange(value.clone().month(parseInt(selectedMonth, 10)));
                  }
                "
              >
                <a-select-option
                    v-for="(val, index) in getMonths(value)"
                    :key="String(index)"
                    class="month-item"
                >
                  {{ val }}
                </a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </div>
      </template>
    </a-calendar>
  </div>
  <div class="hot-warp">
    <div class="warp-title hot-hr">热门文章</div>
  </div>
  <div class="hot-warp">
    <div class="warp-title hot-hr">热门标签</div>
  </div>
</template>

<script setup>
import moment from'moment';
import 'moment/dist/locale/zh-cn';
import {ref} from "vue";
moment.locale('zh-cn');
const emit = defineEmits(['onSubmit']);
const  times = ref()
const getMonths =(value )=>{
  const current = value.clone();
  const localeData = value.localeData();
  const months = [];
  for (let i = 0; i < 12; i++) {
    current.month(i);
    months.push(localeData.monthsShort(current));
  }
  return months;
}
const getYears =(value )=>{
  const year = value.year();
  const years = [];
  for (let i = year - 10; i < year + 10; i += 1) {
    years.push(i);
  }
  return years;
}
//点击日历
const onSelect =(value)=>{
  emit('onSubmit',value)
}

</script>

<style scoped>
.calendar{
  background-color: #fff;
  border-radius: 5px;
}
.warp-title{
  height: 35px;
  line-height: 35px;
  font-size: 16px;
  padding-left: 5px;
  color: #333333;
}
.hot-warp{
  width: 100%;
  min-height: 200px;
  background-color: #fff;
  border-radius: 5px;
  margin-top: 15px;
  box-sizing: border-box;
  padding: 5px;
  color: #444444;
}
.hot-hr{
  border-bottom: 1px #eee solid;
}
</style>